<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇:新世界 - 闯关模式</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 闯关游戏CSS -->
    <link href="css/challenge-game.css" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部 -->
        <div class="game-header">
            <h1 class="game-title">
                <i class="bi bi-flag-fill me-2"></i>
                闯关模式 - 贪吃蛇
            </h1>
            <div class="level-info" id="levelInfo">关卡 1 / 3</div>
        </div>
        
        <!-- 游戏内容区域 -->
        <div class="game-content">
            <!-- 游戏画布区域 -->
            <div class="game-area">
                <div class="game-canvas-container">
                    <canvas id="gameCanvas" width="600" height="600"></canvas>
                </div>
                
                <!-- 移动端控制按钮 -->
                <div class="mobile-controls">
                    <div></div>
                    <button class="control-btn" id="mobileUp">↑</button>
                    <div></div>
                    <button class="control-btn" id="mobileLeft">←</button>
                    <button class="control-btn" id="pauseBtnMobile">⏸️</button>
                    <button class="control-btn" id="mobileRight">→</button>
                    <div></div>
                    <button class="control-btn" id="mobileDown">↓</button>
                    <div></div>
                </div>
                
                <!-- 游戏结束/关卡完成遮罩 -->
                <div class="game-overlay" id="gameOverlay" style="display: none;">
                    <div class="overlay-content">
                        <h2 class="overlay-title" id="overlayTitle">游戏结束</h2>
                        <p class="overlay-message" id="overlayMessage">您的贪吃蛇撞到了墙壁！</p>
                        
                        <div class="overlay-stats" id="overlayStats">
                            <div class="stat-item">
                                <span class="stat-label">当前分数：</span>
                                <span class="stat-value" id="finalScore">0</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">最高分数：</span>
                                <span class="stat-value" id="highScore">0</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">当前关卡：</span>
                                <span class="stat-value" id="finalLevel">1</span>
                            </div>
                        </div>
                        
                        <div class="overlay-buttons">
                            <button class="btn-overlay btn-overlay-success" id="restartBtn">
                                <i class="bi bi-arrow-repeat me-2"></i>重新开始
                            </button>
                            <button class="btn-overlay" id="nextLevelBtn" style="display: none;">
                                <i class="bi bi-arrow-right me-2"></i>下一关
                            </button>
                            <button class="btn-overlay btn-overlay-danger" id="menuBtnOverlay">
                                <i class="bi bi-house me-2"></i>返回主页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 游戏控制面板 -->
            <div class="game-panel">
                <!-- 小地图和统计信息 -->
                <div class="mini-map-container">
                    <div class="mini-map-header">
                        <i class="bi bi-map me-2"></i>小地图
                    </div>
                    <canvas id="miniMapCanvas" width="120" height="120"></canvas>
                </div>
                
                <!-- 统计信息 -->
                <div class="stats-panel">
                    <div class="stat-item">
                        <span class="stat-label">
                            <i class="bi bi-star-fill me-2"></i>分数：
                        </span>
                        <span class="stat-value" id="scoreValue">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">
                            <i class="bi bi-trophy-fill me-2"></i>关卡：
                        </span>
                        <span class="stat-value" id="levelValue">1</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">
                            <i class="bi bi-arrow-right-square-fill me-2"></i>长度：
                        </span>
                        <span class="stat-value" id="snakeLengthValue">3</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">
                            <i class="bi bi-clock-fill me-2"></i>时间：
                        </span>
                        <span class="stat-value" id="timeValue">00:00</span>
                    </div>
                </div>
                
                <!-- 关卡进度 -->
                <div class="level-progress">
                    <div class="stat-item">
                        <span class="stat-label">关卡进度：</span>
                        <span class="stat-value" id="levelProgress">0%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">目标分数：</span>
                        <span class="stat-value" id="targetScore">100</span>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <div class="controls-panel">
                    <div class="control-buttons">
                        <button class="btn-game btn-start" id="startBtn">
                            <i class="bi bi-play-fill me-2"></i>开始游戏
                        </button>
                        <button class="btn-game btn-pause" id="pauseBtn">
                            <i class="bi bi-pause-fill me-2"></i>暂停
                        </button>
                        <button class="btn-game" id="resetBtn">
                            <i class="bi bi-arrow-repeat me-2"></i>重新开始
                        </button>
                        <button class="btn-game" id="menuBtn">
                            <i class="bi bi-house me-2"></i>返回主页
                        </button>
                    </div>
                </div>
                
                <!-- 游戏说明 -->
                <div class="game-instructions">
                    <div class="instructions-title">
                        <i class="bi bi-keyboard me-2"></i>操作说明
                    </div>
                    <ul class="instructions-list">
                        <li><i class="bi bi-arrow-up"></i>W / ↑ : 向上移动</li>
                        <li><i class="bi bi-arrow-down"></i>S / ↓ : 向下移动</li>
                        <li><i class="bi bi-arrow-left"></i>A / ← : 向左移动</li>
                        <li><i class="bi bi-arrow-right"></i>D / → : 向右移动</li>
                        <li><i class="bi bi-space"></i>空格键 : 暂停/继续</li>
                        <li><i class="bi bi-r-square"></i>R键 : 重新开始</li>
                        <li><i class="bi bi-escape"></i>ESC键 : 返回主页</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 游戏底部 -->
        <div class="game-footer">
            <a href="choose.html" class="back-btn">
                <i class="bi bi-arrow-left me-2"></i>返回难度选择
            </a>
        </div>
    </div>

    <!-- 闯关游戏JavaScript -->
    <script src="js/challenge-game.js"></script>
</body>
</html>